<template>
  <div class="page-container">
    <TrSearch
      v-model="searchParams"
      :searchShowList="searchShowList"
      @search-back="searchHandle"
    />
    <div class="common-content-wrap mg-tp-16">
      <TrTable
        ref="trTable"
        :btnList="btnList"
        :tableColumn="tableColumn"
        lazy
        :loadFun="loadFun"
        :tableData="assTableData"
        :isNeedPagination="false"
        @rowDelete="operateHandle($event, 'delete')"
        @add="operateHandle($event, 'add')"
        @rowAdd="operateHandle($event, 'rowAdd')"
        @rowEdit="operateHandle($event, 'rowEdit')"
      />
    </div>
    <TrEditPopup
      v-model="isShowEdit"
      :title="checkTitle"
      :valueObj.sync="formObj"
      :formData="formData"
      :list="popupList"
      @close="isShowEdit = false"
      @confrim="confrimHandle"
    />
  </div>
</template>

<script>
import { findByProperty } from "@/utils/util";
import { mapGetters } from "vuex";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrSearch from "@/components/Tr-search/Tr-search.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import { getLazyList, add, remove, getMenuTree } from "@/api/system/menu";
import enumData from "@/utils/enumCode.js";
export default {
  name: "MenuBox",
  components: {
    TrSearch,
    TrTable,
    TrEditPopup,
  },
  computed: {
    ...mapGetters(["allMenu", "tagList"]),
    checkTitle() {
      return this.currentHandle == "add"
        ? "新增"
        : this.currentHandle == "rowAdd"
        ? "新增子项"
        : "编辑";
    },
  },
  data: () => ({
    formObj: {
      systemCode: "TRIO_SYS_000",
    },
    formData: {},
    popupList: [
      {
        label: "菜单名称",
        type: "input",
        width: 50,
        value: "",
        id: "name",
      },
      {
        label: "路由地址",
        type: "input",
        width: 50,
        value: "",
        id: "path",
        isNeed: false,
      },
      {
        label: "上级菜单",
        type: "treeSingle",
        width: 50,
        value: "",
        id: "parentId",
        showWord: "title",
        list: [],
        disabled: false,
        isNeed: false,
      },
      {
        label: "菜单图标",
        type: "input",
        width: 50,
        value: "",
        id: "source",
      },
      {
        label: "菜单编号",
        type: "input",
        width: 50,
        value: "",
        id: "code",
      },
      {
        label: "菜单类型",
        type: "radio",
        width: 50,
        value: 1,
        id: "category",
        list: [
          {
            label: "菜单",
            value: 1,
          },
          {
            label: "按钮",
            value: 2,
          },
        ],
      },
      {
        label: "菜单别名",
        type: "input",
        width: 50,
        value: "",
        id: "alias",
      },
      {
        label: "菜单排序",
        type: "input",
        width: 50,
        value: "",
        id: "sort",
      },
      {
        label: "启停状态",
        type: "radio",
        width: 50,
        value: 1,
        id: "isEnabled",
        list: [
          {
            label: "启用",
            value: 1,
          },
          {
            label: "停用",
            value: 2,
          },
        ],
      },
      {
        label: "终端类型",
        type: "select",
        width: 50,
        value: "",
        id: "terminalModel",
        list: [],
      },
      {
        isNeed: false,
        label: "菜单备注",
        type: "textarea",
        width: 100,
        value: "",
        id: "remark",
      },
    ],
    isShowEdit: false,
    searchShowList: [
      {
        id: "name",
        type: "input",
        width: 33.3,
        label: "菜单名称",
        value: "",
      },
      {
        id: "code",
        type: "input",
        width: 33.3,
        label: "菜单编号",
        value: "",
      },
      {
        id: "alias",
        type: "input",
        width: 33.3,
        label: "菜单别名",
        value: "",
      },
    ],
    searchParams: {
      name: "",
      code: "",
      alias: "",
    },
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
    ],
    tableColumn: [
      {
        fixed: "left",
        type: "text",
        label: "菜单名称",
        value: "name",
        width: 160,
      },
      {
        type: "text",
        label: "路由地址",
        value: "path",
      },
      {
        type: "text",
        label: "菜单图标",
        value: "source",
      },
      {
        type: "text",
        label: "菜单编号",
        value: "code",
      },
      {
        type: "text",
        label: "菜单别名",
        value: "alias",
      },
      {
        type: "text",
        label: "终端类型",
        value: "terminalModelName",
      },
      {
        type: "text",
        label: "启停状态",
        value: "isEnabledName",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 180,
        showBtnList: [
          {
            label: "新增子项",
            option: "rowAdd",
          },
          {
            label: "编辑",
            option: "rowEdit",
          },
          {
            label: "删除",
            option: "rowDelete",
          },
        ],
      },
    ],
    assTableData: [],
    parentId: 0,
    currentHandle: null,
    rowInfo: null,
  }),
  methods: {
    operateHandle(val, type) {
      console.log(val, type, "val, typeval, typeval, type");
      this.currentHandle = type;
      this.rowInfo = val;
      if (type == "delete") return this.rowDelete(val, type);
      this.initHandle(val, type);
    },
    async initHandle(val, type) {
      let res = await getMenuTree();
      if (type == "add") {
        this.popupList.forEach((item) => {
          if (item.id == "parentId") {
            item.value = "";
            item.disabled = false;
            item.list = res.data.data;
          }
        });
        this.formData = {};
      } else {
        this.popupList.forEach((item) => {
          if (item.id == "parentId") {
            item.value = val.id;
            item.disabled = true;
            item.list = res.data.data;
          }
        });
        console.log("this.popupList", this.popupList);
        this.formData = type == "rowAdd" ? {} : val;
        this.$forceUpdate();
      }
      this.isShowEdit = true;
    },
    confrimHandle() {
      this.formObj.id = this.currentHandle == "rowEdit" ? this.rowInfo.id : "";
      this.addMenu(this.formObj);
    },
    addMenu(params) {
      add(params).then(async (res) => {
        if (res.data.code != 200) return;
        this.isShowEdit = false;
        this.getMenuList(0);
        this.$message.success(this.$t("msg.success"));
        if (params.parentId) {
          let chRes = await getLazyList(params.parentId);
          this.$refs.trTable.updateKeyChildrenById(
            params.parentId,
            chRes.data.data
          );
        }
        this.$store.dispatch("GetButtons");
        if (params.id === undefined) this.retRouter();
      });
    },
    rowDelete(val) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          let res = await remove(val.id);
          if (res.data.code != 200) return;
          this.$message.success(this.$t("msg.success"));
          this.getMenuList(0);
          const mIndex = this.tagList.findIndex(
            (item) => item.value == val.path
          );
          if (mIndex > 0) this.$store.commit("DEL_TAG", this.tagList[mIndex]);
          this.retRouter();
          let chRes = await getLazyList(this.rowInfo.parentId);
          this.$refs.trTable.updateKeyChildrenById(
            this.rowInfo.parentId,
            chRes.data.data
          );
        })
        .catch(() => {});
    },
    async retRouter() {
      let list = await this.$store.dispatch("GetMenu");
      this.$store.dispatch("SetRouter", list);
      this.$nextTick(() => {
        let fMenu = this.allMenu.find((item) => item.path == "/system");
        this.$store.commit("SET_ACTIVE_MENU", [fMenu]);
      });
    },
    loadFun(tree, treeNode, resolve) {
      // console.log(tree, treeNode, resolve, "tree, treeNode, resolve");
      getLazyList(tree.id).then((res) => {
        let data = res.data.data;
        if (!data.length) {
          this.$refs.trTable.clearLazyNode(tree.id);
        } else {
          data.forEach((item) => {
            item["isEnabledNameColor"] =
              {
                1: "#00A870",
                2: "#E34D59",
              }[item.isEnabled] || "";
          });
          resolve(data);
        }
      });
    },
    searchHandle() {
      this.getMenuList("", this.searchParams);
    },
    getMenuList(id, params = {}) {
      getLazyList(id, params).then((res) => {
        if (res.data.code != 200) return;
        this.assTableData = res.data.data;
        this.assTableData.forEach((item) => {
          item["isEnabledNameColor"] =
            {
              1: "#00A870",
              2: "#E34D59",
            }[item.isEnabled] || "";
        });
      });
    },
    async getEnumHandle() {
      const res = await this.$fetchEnumData([enumData.terminalType]);
      const column = findByProperty(this.popupList, "id", "terminalModel");
      column.list = res[enumData.terminalType];
    },
  },
  mounted() {
    this.getMenuList(this.parentId);
    this.getEnumHandle();
  },
};
</script>

<style></style>
